<template>
    <el-container style="padding: 20px; max-width: 400px; margin: auto;">
        <el-button type="primary" @click="handleTest" style="margin-top: 10px;">
            测试
        </el-button>
    </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

const handleTest = () => {
    // 布尔值
    let isDone: boolean = false;
    // 数字类型
    const num6: number = 6;
    // 字符串
    const name: string = "Jack"
    // 数组  有两种方法可以定义数组 一是在元素类型后接上 []  一是使用数组泛型 Array<元素类型>
    // Number[] ==> 表述数组中元素类型为数字类型
    const numList: Number[] = [1, 2, 3, 4];
    // string[] ==> 表示数组中元素类型为字符串
    const nameList: string[] = ["marry", "john"];
    // 数组泛型 Array<元素类型>
    const numList2: Array<number> = [1, 2, 3, 4];
    // 元祖 tuple
    // 元祖类型允许一个已知元素数量和类型的数组，各元素【类型】不必相同，比如可以分别为string 和 number
    const list1: [string, number] = ["joker", 4];
    //枚举 enum
    // enum 类型是对JS标准数据类型的补充，可以为一组数值赋予友好的名字
    enum color { red, black, pink };
    const myColor: color = color.black
    // 默认从0开始为元素编号，也可以手动为上面例子从1开始编号
    enum color1 { red = 1, black = 2, pink = 3 };
    const myColor1: color1 = color1.black
    //枚举类型  可以由枚举的值得到它的名字，例如知道数值为2，但是不知道映射到color1中哪个名字，可以查找
    const myColor1Name: string = color1[2];
    console.log("myColor1Name", myColor1Name);  //balck

    // any 类型 制定一个现阶段还不知道类型的数据
    let notSureData: any = 4;    //number
    notSureData = "now is me";   //string
    notSureData = true           //boolean
    //当只知道一部分数据的类型时，any 也是有用的，比如一个数组包含了不同类型的数据
    const list2: any[] = [1, 2, "one", true];
    list2[1] = 3;
    console.log("修改后的list2", list2)  //==> [1, 3, "one", true]

    //void 与any 类型相反，void 表示没有任何类型，当一个函数没有返回值，通常返回的类型是 void
    function someFunc(): void {
        console.log("rt 123")
    }
    //声明一个void类型的变量没屁用，因为一个变量 不赋予初始值的时候，只有 null  和 undefined 两种情况
    // null ==>  空值
    // console.log("str", str);
    let str;
    // undefined ==>  声明 但未赋初始值
    console.log("str", str)

    // Null 和 Undefined
    // ts 中 null 和 undefined 都有各自的类型，但用处不大
    const n: null = null;
    const u: undefined = undefined;
    //默认情况下，null 和 undefined 是所有类型的子类型

    // Never 类型表示那些永远不存在的值的类型  never 是任何类型的子类型，也可以赋予给任何类型
    // 没有类型时never的子类型 或 可以 赋值给never类型，除了never本身之外，即使any 也不能赋值给never

    //Object类型 表示非原始类型，也就是除了基本数据类型（null undefined number string  boolean symbol）之外的类型
    //  declare function create(o: object | null): void;
    //只能创造 object 或 null 类型
    // create({ "a": 1 })  // ok
    // create(null)  //ok
    // create(123)  //error

    //类型断言  好比其他语言里面的类型转换，可以通过类型断言这种方式告诉编译器，“信我，我知道我在干啥”
    //类型断言的两种形式
    // <> 尖括号语法 如<string> + 数据
    const someVal: any = "this is a string";
    const strLength: number = (<string>someVal).length;
    console.log("someVal的字符串长度为", strLength)   //16
    // as 语法  判定 strVal 为 string 类型
    const strLength2: number = (someVal as string).length


}




</script>

<style scoped>
.el-input {
    width: 100%;
}
</style>
